import styles from './index.module.less';
import type { TableProps } from 'antd';
import { Button } from 'antd';
import { QueryTable } from '@hdtd/components/test';
import { useRef } from 'react';

interface IRecord {
  id: number;
  name: string;
  gender: string;
  age: number;
  certificate: string;
  isAbsent: boolean;
}

const mock: Array<IRecord> = [
  {
    id: 1,
    name: '张明',
    gender: '男',
    age: 24,
    certificate: '学士学位',
    isAbsent: false
  },
  {
    id: 2,
    name: '李丽',
    gender: '女',
    age: 28,
    certificate: '高中证书',
    isAbsent: true
  },
  {
    id: 3,
    name: '王芳',
    gender: '女',
    age: 21,
    certificate: '大学证书',
    isAbsent: false
  },
  {
    id: 4,
    name: '刘伟',
    gender: '男',
    age: 32,
    certificate: '硕士学位',
    isAbsent: false
  },
  {
    id: 5,
    name: '陈静',
    gender: '女',
    age: 26,
    certificate: '博士学位',
    isAbsent: true
  },
  {
    id: 6,
    name: '黄杰',
    gender: '男',
    age: 22,
    certificate: '技能证书',
    isAbsent: false
  },
  {
    id: 7,
    name: '杨敏',
    gender: '女',
    age: 29,
    certificate: '职业证书',
    isAbsent: true
  },
  {
    id: 8,
    name: '赵强',
    gender: '男',
    age: 31,
    certificate: '语言证书',
    isAbsent: false
  },
  {
    id: 9,
    name: '徐丽',
    gender: '女',
    age: 25,
    certificate: '培训证书',
    isAbsent: false
  },
  {
    id: 10,
    name: '孙浩',
    gender: '男',
    age: 27,
    certificate: '资格认证',
    isAbsent: true
  },
  {
    id: 11,
    name: '周梅',
    gender: '女',
    age: 23,
    certificate: '中学证书',
    isAbsent: false
  },
  {
    id: 12,
    name: '吴斌',
    gender: '男',
    age: 30,
    certificate: '大学证书',
    isAbsent: true
  },
  {
    id: 13,
    name: '郑倩',
    gender: '女',
    age: 26,
    certificate: '专业证书',
    isAbsent: false
  },
  {
    id: 14,
    name: '马超',
    gender: '男',
    age: 33,
    certificate: '学士学位',
    isAbsent: false
  },
  {
    id: 15,
    name: '朱燕',
    gender: '女',
    age: 28,
    certificate: '技能证书',
    isAbsent: true
  },
  {
    id: 16,
    name: '胡强',
    gender: '男',
    age: 24,
    certificate: '语言证书',
    isAbsent: false
  },
  {
    id: 17,
    name: '林霞',
    gender: '女',
    age: 29,
    certificate: '培训证书',
    isAbsent: false
  },
  {
    id: 18,
    name: '何伟',
    gender: '男',
    age: 31,
    certificate: '资格认证',
    isAbsent: true
  },
  {
    id: 19,
    name: '高婷',
    gender: '女',
    age: 27,
    certificate: '中学证书',
    isAbsent: false
  },
  {
    id: 20,
    name: '宋杰',
    gender: '男',
    age: 22,
    certificate: '专业证书',
    isAbsent: true
  }
];

const QTTest = () => {
  const QueryTableRef = useRef<any>(null);
  const tableConfig: TableProps<IRecord> = {
    rowKey: 'id',
    scroll: {
      // 对开启滚动表格的样式进行了部分重写，现在支持百分比赋值，基于容器高度调整表格高度
      y: '100%'
    },
    columns: [
      {
        title: '姓名',
        dataIndex: 'name'
      },
      {
        title: '性别',
        dataIndex: 'gender'
      },
      {
        title: '年龄',
        dataIndex: 'age'
      },
      {
        title: '证书',
        dataIndex: 'certificate'
      },
      {
        title: '是否缺勤',
        dataIndex: 'isAbsent',
        render: (value) => (value ? '是' : '否')
      }
    ],
    pagination: {
      current: 3,
      pageSize: 2,
      showSizeChanger: true
    }
  };

  const getData = async (pageNum = 1, pageSize = 8) => {
    const res = new Promise<any>((resolve) => {
      setTimeout(() => {
        resolve({
          pageNum,
          pageSize,
          pageTotal: ~~(mock.length / pageSize) + (mock.length % pageSize) !== 0 ? 1 : 0,
          totalNum: mock.length,
          records: mock.slice((pageNum - 1) * pageSize, pageNum * pageSize)
        });
        resolve(mock);
      }, 1000);
    });
    return res;
  };

  return (
    <div className={styles['box-qt-test']}>
      <div style={{ overflow: 'hidden' }}>
        <QueryTable ref={QueryTableRef} config={tableConfig} ajax={{ query: getData }} />
      </div>
      <div>
        <Button onClick={() => QueryTableRef.current?.queryTableData(1, 5)}>查询</Button>
      </div>
    </div>
  );
};

export default QTTest;
